<template>
  <div style="background-color: #f4fafe; min-height: 100vh">
    <div class="main_heade">
      <h2>{{ title }} 面经汇总</h2>
      <!-- <div>433篇面经</div> -->
    </div>
    <!-- <HeaderCom></HeaderCom> -->
    <div
      style="
        display: flex;
        justify-content: flex-end;
        margin-right: 10%;
        margin-top: 1.875rem;
      "
    >
      <span style="cursor: pointer">
        开始日期：&nbsp;
        <!-- 按时间筛选 -->
        <el-date-picker
          @change="dateChange"
          v-model="value"
          type="date"
          placeholder="选择日期"
          style="width: 10.125rem"
        >
        </el-date-picker>
      </span>
      <span style="margin-left: 1.875rem; cursor: pointer" v-if="postid==2">
        <el-select
          filterable
          v-model="valueE"
          placeholder="选择企业"
          style="width: 10.125rem"
          @change="goe"
        >
          <el-option
            v-for="item in optionsE"
            :key="item.value"
            :label="item.enterpriseName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </span>
	  <span style="margin-left: 1.875rem; cursor: pointer" v-if="postid==1">
	    <el-select
	      filterable
	      v-model="valueB"
	      placeholder="选择标签"
	      style="width: 10.125rem"
	      @change="goe1"
	    >
	      <el-option
	        v-for="item in optionsB"
	        :key="item.value"
	        :label="item.labelName"
	        :value="item.id"
	      >
	      </el-option>
	    </el-select>
	  </span>
    </div>
    <div class="main_content">
    
      <ul class="common-list" v-if="postsList.length > 0">
        <li
          v-for="(Item, index) in postsList"
          :key="index"
          style="margin-top: 2.25rem"
        >
          <div class="interview-summarize-list-title" @click="check(Item.id)">
            {{ Item.title }}
          </div>
          <p @click="check(Item.id)" v-html="Item.content"></p>
          <div class="interview-summarize-list-bottom">
            <span>发布于{{ Item.createTime }}</span>
            <div>
              <span style="color: #ffaa00">浏览数：</span>{{ Item.views }}
            </div>
          </div>
          <el-divider></el-divider>
        </li>
      </ul>
      <div
        class="common-list"
        style="
          background: #fff;
          padding: 40px;
          display: flex;
          justify-content: center;
          align-itmes: center;
        "
        v-if="postsList.length === 0"
      >
	  <el-empty :image-size="200"></el-empty>
        
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { HttpManager } from "../../request/Facial.js";
import HeaderCom from "../component/HeaderCom.vue";
export default {
  components: {
    HeaderCom: HeaderCom,
  },
  data() {
    return {
      title: "",
      value: "",
      valueE: "",
	  valueB:"",
      optionsE: [],
	  optionsB: [],
      postsList: [],
      id: [], // 知识点id
      eid: [], // 企业id
      pageNum: 1,
      pageSize: 100,
	  date:'',  // 查询截止事件
	  postid:''
    };
  },
  created() {
    this.Init();
    this.Init1();
	this.Init2();
  },
  watch: {
    $route(newvalue, oldvalue) {
      console.log("router 变化了");
      this.Init();
	  this.Init2();
      this.Init1();
    },
  },
  methods: {
	 //日期筛选
    dateChange(val) {
      console.log("日期变化");
      console.log(val);
	  const date = moment(val).format('YYYY-MM-DD');
	  this.date = date;
	  this.Init1();
    },
    goe(id) {
      console.log(id);
      const e = this.optionsE.find((e) => e.id == id);
      const title = e.enterpriseName;
      this.$router.push({
        path: "/SpecialMeridian",
        query: {
          enterpriseId: id,
          title: title,
		  postid:2
        },
      });
    },
	goe1(id)
	{
		const e = this.optionsB.find((e) => e.id == id);
		const title = e.labelName;
		this.$router.push({
		  path: "/SpecialMeridian",
		  query: {
		    id: id,
		    title: title,
			postid:1
		  },
		});
	},
	//获取企业列表
    Init() {
     
      const loading = this.$loading({
        lock: true,
        text: "正在加载...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      HttpManager.GetEnterprise().then((e) => {
        loading.close();
        console.log(e.data.data);
        this.optionsE = e.data.data;
      });
    },
	//帖子筛选
    Init1() {
	   const id = this.$route.query.id;
	   const eid = this.$route.query.enterpriseId;
	   this.title = this.$route.query.title;
	   this.postid = this.$route.query.postid;
	   if (id) {
	     this.id = [id];
	   } else {
	     this.eid = [eid];
	   }
      const loading = this.$loading({
        lock: true,
        text: "正在加载...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.axios
        .post(`/posts/filter/${this.pageNum}/${this.pageSize}`, {
          date: this.date,
          enterpriseList: this.eid,
          labelList: this.id,
        })
        .then((e) => {
          loading.close();

          console.log(e.data.data);
          this.postsList = e.data.data;
        }).
		catch(err=>{
			loading.close();
		})
    },
	//获取标签列表
	Init2()
	{
		HttpManager.GetLabels(1, 100).then((e) => {
		  console.log(e.data.data);
		  this.optionsB = e.data.data;
		});
	},
	
    check(id) {
      this.axios.patch(
        "/posts/+" + id + "/views",
        {},
        {
          headers: {
            token: localStorage.getItem("token"),
            "content-type": "application/json",
          },
        }
      );
      this.$router.push({
        path: `/SurfaceDetails`,
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style scoped="scoped">
.main_heade {
  height: 100px;
  line-height: 100px;
  width: 100%;
  color: white;
  text-align: center;
  background-color: #03d3bd;
}

.interview-summarize-list-title {
  color: #00baa6;
}

.main_content {
  margin-left: 10%;
  width: 80%;
  overflow: hidden;
  margin-top: 1.875rem;
  /* height: 14.25rem; */
}

.main_content_item {
  overflow: hidden;
  padding: 1.825rem;
  margin-bottom: 1.875rem;
  /* margin-top: 1.875rem; */
  background-color: #ffffff;
}

ul {
  list-style: none;
  background-color: white;
  padding: 1.875rem;
  border-radius: 5px;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
  list-style: none;
}

.common-list li .interview-summarize-list-title {
  color: #333;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.common-list li .interview-summarize-list-bottom {
  line-height: 16px;
  color: #c3c3c3;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}

.common-list li .interview-summarize-list-bottom i.icon-dianzan1 {
  vertical-align: top;
}

.common-list li .interview-summarize-list-bottom i {
  color: #e2e2e2;
  display: inline-block;
  margin-right: 8px;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.common-list li .interview-summarize-list-bottom i {
  color: #e2e2e2;
  display: inline-block;
  margin-right: 8px;
}

element.style {
}

.common-list li p {
  font-size: 14px;
  color: #888;
  line-height: 22px;
  overflow: hidden;
  letter-spacing: 0.5px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 26px;
}
</style>
